<template>
	<div class="container11">
		<!-- 第一行：分大、中、小三块 -->
		<div class="row">
			<el-row :gutter="20" justify="space-between">
				<el-col :xs="24" :sm="10" :md="6">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header">
								<span>待办事项</span>
							</div>
						</template>
						<div class="container">
							<div v-for="item in daibanlist" :key="item" class="item cursor" @click="godaiban(item.pagePath)">
								<div class="item-title">{{ item.name }}</div>

								<div class="item-content">{{ item.number }}</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="14" :md="10">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header">
								<span>常用功能</span>
							</div>
						</template>

						<div v-if="userStore.user.roleCode.includes('SHZJW') || userStore.user.roleCode.includes('SHZG')" class="container">
							<div class="item1" @click="router.push('/Sproject/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报审核</div>
							</div>
							<div class="item1" @click="router.push('/bianzhi/shenhe/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准编制审核</div>
							</div>
						</div>

						<div v-if="userStore.user.roleCode.includes('SYADMIN') || userStore.user.roleCode.includes('ZZADMIN')" class="container">
							<div class="item1" @click="router.push('/Sproject/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报审核</div>
							</div>
							<div class="item1" @click="router.push('/bianzhi/shenhe/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准编制审核</div>
							</div>
							<div class="item1">
								<img src="@/assets/imgguidang.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准归档</div>
							</div>
							<div class="item1" @click="router.push('/Prospect-project/project-examine/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究申报审核</div>
							</div>
							<div class="item1" @click="router.push('/Prospect-project/Project-process-audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究编制审核</div>
							</div>
							<div class="item1">
								<img src="@/assets/imgchengguo.png" alt="" width="20px" height="20px" />
								<div class="item-title1">成果发布</div>
							</div>
							<div class="item1">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">账号分配</div>
							</div>
							<div class="item1" @click="router.push('/system/deadlineTime/index')">
								<img src="@/assets/imgshijian.png" alt="" width="20px" height="20px" />
								<div class="item-title1">时间设定</div>
							</div>
						</div>

						<div v-if="userStore.user.roleCode.includes('SB')" class="container">
							<div class="item1" @click="router.push('/Sproject/declare/index')">
								<img src="@/assets/imgshenbao.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报</div>
							</div>
							<div class="item1" @click="router.push('/bianzhi/shenbao/index')">
								<img src="@/assets/imgbianzhi.png" alt="" width="20px" height="20px" />
								<div class="item-title1">编制申报管理</div>
							</div>
							<div class="item1" @click="router.push('/Reexamine/declare/index')">
								<img src="@/assets/imgbianzhi.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准复审申报</div>
							</div>
							<div class="item1" @click="router.push('/Prospect-project/project-declare/index')">
								<img src="@/assets/imgshenbao.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究申报</div>
							</div>
							<div class="item1" @click="router.push('/Prospect-project/Project-process/index')">
								<img src="@/assets/imgbianzhi.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究过程管理</div>
							</div>
						</div>

						<div v-if="userStore.user.roleCode.includes('SHZJ') || userStore.user.roleCode.includes('SHZZ')" class="container">
							<div class="item1" @click="router.push('/Sproject/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报审核</div>
							</div>
							<div class="item1" @click="router.push('/bianzhi/shenhe/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准编制审核</div>
							</div>
							<div class="item1">
								<img src="@/assets/imgguidang.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准归档</div>
							</div>
							<div class="item1" @click="router.push('/Prospect-project/project-examine/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究申报审核</div>
							</div>
							<div class="item1" @click="router.push('/Prospect-project/Project-process-audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究编制审核</div>
							</div>
							<div class="item1">
								<img src="@/assets/imgchengguo.png" alt="" width="20px" height="20px" />
								<div class="item-title1">成果发布</div>
							</div>

							<div class="item1" @click="router.push('/system/deadlineTime/index')">
								<img src="@/assets/imgshijian.png" alt="" width="20px" height="20px" />
								<div class="item-title1">时间设定</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="10" :md="8">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header flex box-align-center">
								<div style="flex: 1">超期提醒</div>
								<!-- <div class="lookmore flex box-align-center">
									查看全部<el-icon color="#a0a0a0" :size="16"><ArrowRight /></el-icon>
								</div> -->
							</div>
						</template>
						<div class="container1">
							<div v-for="item in chaoqixintixing" :key="item" class="flex box-row-column" style="width: 100%">
								<div style="font-size: 15px; font-weight: 600">{{ item.name }}</div>
								<ul class="ul">
									<li v-for="value in item.list" :key="value" class="ul-item flex box-align-center cursor">
										<div class="ul-item-title flex-1">{{ value.name }}</div>
										<div class="ul-item-go" @click="godaiban(item.pagePath)">进入</div>
									</li>
								</ul>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<!-- 第二行：撑满剩余空间 -->
		<div class="row second-row">
			<el-row :gutter="20" justify="space-between" class="flex-1" style="height: 100%">
				<el-col :xs="24" :sm="14" :md="16">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header">
								<span>常用功能</span>
							</div>
						</template>

						<div class="container">
							<div v-for="(item, index) in chartData" :key="index" class="item">
								<div :id="'chart-' + index" style="width: 100%; height: 300px"></div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="10" :md="8">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header flex box-align-center">
								<div style="flex: 1">通知公告</div>
								<!-- <div class="lookmore flex box-align-center">
									查看全部<el-icon color="#a0a0a0" :size="16"><ArrowRight /></el-icon>
								</div> -->
							</div>
						</template>
						<div class="container">
							<ul class="ul">
								<li v-for="value in state.dataList" :key="value" class="ul-item flex box-align-center">
									<div class="ul-item-title flex-1">{{ value.noticePublishName }}</div>
									<div class="ul-item-go cursor" @click="godaiban('/notice/noticePublish/index')">进入</div>
								</li>
							</ul>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>

	<!-- <el-space fill wrap :fill-ratio="28" style="width: 100%">
		<el-card style="width: 100px">
			<template #header>
				<div class="card-header">
					<span>测试测试</span>
				</div>
			</template>
			<div style="height: 220px; display: flex; justify-content: center">
				<el-image src="https://maku.net/app/img/qrcode.jpg" />
			</div>
		</el-card>
		<el-card style="width: 600px">
			<template #header>
				<div class="card-header">
					<span>统计图</span>
				</div>
			</template>
			<div style="height: 220px; display: flex; justify-content: center">
				<div ref="main" style="width: 100%; height: 220px"></div>
			</div>
		</el-card>
		<el-card style="width: 600px">
			<template #header>
				<div class="card-header">
					<span>统计图</span>
				</div>
			</template>
			<div style="height: 220px; display: flex; justify-content: center">
				<div ref="main" style="width: 100%; height: 220px"></div>
			</div>
		</el-card>
	</el-space> -->
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { useTransition } from '@vueuse/core'
import { onMounted, ref, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { workBenchApi, workRemindApi, workAnalyseApi } from '@/api/workbench'
import { govNoticePublishListApi } from '@/api/government/index'
import * as echarts from 'echarts'
const router = useRouter()
const userStore = useUserStore()

const source = ref(0)
const outputValue = useTransition(source, {
	duration: 1500
})
source.value = 888888
const chaoqixintixing = ref([])
const active = ref('first')
const daibanlist = ref([])
const tableData = []

const godaiban = item => {
	router.push({
		path: '/' + item
	})
}
const chartData = ref([])
const state = reactive({
	queryForm: {
		pageNum: 1,
		pageSize: 40
	},
	total: 1,
	dataListLoading: false,
	dateRanges: '',
	applyStatusList: [],
	keyword: '',
	keyType: '',
	dataList: []
})
onMounted(() => {
	///	init()

	workRemindApi().then(res => {
		chaoqixintixing.value = res.data || []
	})
	workBenchApi().then(res => {
		daibanlist.value = res.data || []
	})

	govNoticePublishListApi(state.queryForm).then(res => {
		state.dataList = res.data.list

		// console.log(state.dataList)
	})

	workAnalyseApi().then(res => {
		chartData.value = res.data || []
		nextTick(() => renderCharts())
	})
})

const renderCharts = () => {
	// 动态生成 series
	const COLORS = [
		'#5470C6', // 蓝色
		'#91CC75', // 绿色
		'#FAC858', // 黄色
		'#EE6666', // 红色
		'#73C0DE', // 浅蓝色
		'#3BA272' // 深绿色
	]
	const shuffledColors = [...COLORS].sort(() => Math.random() - 0.5)
	chartData.value.forEach((item, index) => {
		const chartDom = document.getElementById(`chart-${index}`)
		const myChart = echarts.init(chartDom)
		const option = {
			grid: {
				left: '10%', // 左侧留白
				right: '10%', // 右侧留白
				width: '80%' // 绘图区域宽度(相对容器百分比或像素值)
			},
			title: { text: item.name, left: 'center' },
			xAxis: { data: ['每月', '每季', '每年'] },
			yAxis: { type: 'value' },
			series: [
				{
					type: 'bar',
					data: item.count.map(Number),
					itemStyle: {
						color: shuffledColors[index % COLORS.length]
					}
				}
			]
		}
		myChart.setOption(option)
	})
	window.addEventListener('resize', this.resizeCharts)
}
const resizeCharts = () => {
	this.chartData.forEach((_, index) => {
		const chart = echarts.getInstanceByDom(document.getElementById(`chart-${index}`))
		chart?.resize()
	})
}

const beforeDestroy = () => {
	window.removeEventListener('resize', this.resizeCharts)
}

const main = ref()

const init = () => {
	let option
	const myChart = echarts.init(main.value)
	const series = [
		{
			data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'a'
		},
		{
			data: [10, 46, 64, '-', 0, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'b'
		},
		{
			data: [30, '-', 0, 20, 10, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'c'
		},
		{
			data: [30, '-', 0, 20, 10, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'b',
			name: 'd'
		},
		{
			data: [10, 20, 150, 0, '-', 50, 10, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'b',
			name: 'e'
		}
	]
	const stackInfo = {} as any
	for (let i = 0; i < series[0].data.length; ++i) {
		for (let j = 0; j < series.length; ++j) {
			const stackName = series[j].stack
			if (!stackName) {
				continue
			}
			if (!stackInfo[stackName]) {
				stackInfo[stackName] = {
					stackStart: [],
					stackEnd: []
				}
			}
			const info = stackInfo[stackName]
			const data = series[j].data[i]
			if (data && data !== '-') {
				if (info.stackStart[i] == null) {
					info.stackStart[i] = j
				}
				info.stackEnd[i] = j
			}
		}
	}
	for (let i = 0; i < series.length; ++i) {
		const data = series[i].data as any
		const info = stackInfo[series[i].stack]
		for (let j = 0; j < series[i].data.length; ++j) {
			const isEnd = info.stackEnd[j] === i
			const topBorder = isEnd ? 20 : 0
			const bottomBorder = 0
			data[j] = {
				value: data[j],
				itemStyle: {
					borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
				}
			}
		}
	}
	option = {
		xAxis: {
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		},
		yAxis: {
			type: 'value'
		},
		series: series
	}

	option && myChart.setOption(option)
	myChart.resize()
}
</script>

<style lang="scss" scoped>
/* 全局样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 容器撑满全屏 */
.container11 {
	height: calc(100vh - 120px);
	/* 动态视口高度 */
	display: flex;
	flex-direction: column;
}

/* 第一行样式 */
.row {
	display: flex;
	flex: 1;
	/* 自动撑满 */
	gap: 10px;
	/* 块间距 */
	padding: 10px;
}

/* 大、中、小块样式 */
.block {
	display: flex;
	flex-wrap: wrap;
	/* 超出换行 */
	gap: 10px;
	/* 内部小 div 间距 */
	padding: 10px;
	border: 1px solid #ccc;
}

/* 大块占 50% */
.large {
	flex: 5;
}

/* 中块占 30% */
.medium {
	flex: 3;
}

/* 小块占 20% */
.small {
	flex: 2;
}

/* 内部小 div 样式 */
// .item {
// 	width: calc(50% - 5px);
// 	/* 一行两个，减去间距 */
// 	height: 50px;
// 	background: #f0f0f0;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// 	border: 1px solid #999;
// }

/* 第二行样式 */
.second-row {
	flex: 1;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.container {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	height: 100%;

	/* 固定高度 */
	overflow-y: auto;
	/* 超出隐藏 */

	// padding: 10px;
	gap: 15px;

	/* 子模块间距 */
	&::-webkit-scrollbar {
		display: none;
	}
}

.container1 {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	height: 100%;

	/* 固定高度 */
	overflow-y: auto;
	/* 超出隐藏 */

	// padding: 10px;
	gap: 15px;

	/* 子模块间距 */
	&::-webkit-scrollbar {
		display: none;
	}
}

/* 子模块：高度自适应缩小 */
.item {
	flex: 1 1 calc(50% - 10px);
	/* 每行两列，减去间距 */
	min-width: calc(50% - 10px);
	/* 防止内容过少时换行 */
	background: #fafafc;

	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 13px 0px;
	// height: auto;
	/* 高度自适应 */
	min-height: 50px;
	/* 最小高度 */
}

.item1 {
	flex: 0 0 calc(33.33% - 10px);
	/* 每行三列，减去间距 */
	min-width: calc(33.33% - 10px);
	/* 防止内容过少时换行 */
	background: rgba($color: #1491ff, $alpha: 0.1);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: auto;
	padding: 15px 0px;
	/* 高度自适应 */
	min-height: 50px;
	/* 最小高度 */
}

::v-deep .el-card__header {
	margin: 0px 16px;
	padding: 15px 0px !important;
}

::v-deep .el-card__body {
	padding: 16px !important;
}

.item-title {
	font-size: 14px;
	color: #666;
}

.item-title1 {
	font-size: 14px;
	color: #1491ff;
	margin-top: 5px;
}

.item-content {
	font-size: 18px;
	color: #333;
	font-weight: 600;
	margin-top: 10px;
}

.lookmore {
	font-size: 12px;
	color: #a0a0a0;
}

.ul-item-title {
	font-size: 14px;
	color: #333;
}

.ul-item-go {
	color: #409eff;
	font-size: 13px;
}

.ul {
	width: 100%;
}

.ul li {
	line-height: 35px;
}
</style>
